<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jquery初探 | 月藤的博客</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css">
    <meta name="description" content="简单的介绍">
    
    <link rel="preload" href="/assets/css/0.styles.a2e941e0.css" as="style"><link rel="preload" href="/assets/js/app.54ea76a2.js" as="script"><link rel="preload" href="/assets/js/2.c554ece5.js" as="script"><link rel="preload" href="/assets/js/35.768c1bb2.js" as="script"><link rel="prefetch" href="/assets/js/10.95d63e51.js"><link rel="prefetch" href="/assets/js/11.26e082be.js"><link rel="prefetch" href="/assets/js/12.1f62021c.js"><link rel="prefetch" href="/assets/js/13.9096527c.js"><link rel="prefetch" href="/assets/js/14.86142c70.js"><link rel="prefetch" href="/assets/js/15.1adeebc5.js"><link rel="prefetch" href="/assets/js/16.efcc79e4.js"><link rel="prefetch" href="/assets/js/17.74da5698.js"><link rel="prefetch" href="/assets/js/18.fd808b3a.js"><link rel="prefetch" href="/assets/js/19.8dafe26f.js"><link rel="prefetch" href="/assets/js/20.aed54ab4.js"><link rel="prefetch" href="/assets/js/21.341a5670.js"><link rel="prefetch" href="/assets/js/22.ab8b375c.js"><link rel="prefetch" href="/assets/js/23.28489470.js"><link rel="prefetch" href="/assets/js/24.87aae001.js"><link rel="prefetch" href="/assets/js/25.211ca3bf.js"><link rel="prefetch" href="/assets/js/26.afa4c8f0.js"><link rel="prefetch" href="/assets/js/27.9b98f6f3.js"><link rel="prefetch" href="/assets/js/28.93298733.js"><link rel="prefetch" href="/assets/js/29.e8c038c4.js"><link rel="prefetch" href="/assets/js/3.9d562ae1.js"><link rel="prefetch" href="/assets/js/30.27939f01.js"><link rel="prefetch" href="/assets/js/31.6a9774e8.js"><link rel="prefetch" href="/assets/js/32.f698e967.js"><link rel="prefetch" href="/assets/js/33.5ba4bfb8.js"><link rel="prefetch" href="/assets/js/34.dca90861.js"><link rel="prefetch" href="/assets/js/36.6b0a867f.js"><link rel="prefetch" href="/assets/js/37.61156e90.js"><link rel="prefetch" href="/assets/js/38.e390246c.js"><link rel="prefetch" href="/assets/js/39.0fbd0dd1.js"><link rel="prefetch" href="/assets/js/4.e18bc6a8.js"><link rel="prefetch" href="/assets/js/40.4252699c.js"><link rel="prefetch" href="/assets/js/41.2e5b5840.js"><link rel="prefetch" href="/assets/js/42.8fe886c7.js"><link rel="prefetch" href="/assets/js/43.7a4b0851.js"><link rel="prefetch" href="/assets/js/44.93c2313d.js"><link rel="prefetch" href="/assets/js/45.33dcea60.js"><link rel="prefetch" href="/assets/js/46.681fdf10.js"><link rel="prefetch" href="/assets/js/47.a842a141.js"><link rel="prefetch" href="/assets/js/48.9a03ba74.js"><link rel="prefetch" href="/assets/js/49.a50266b1.js"><link rel="prefetch" href="/assets/js/5.dc6a2d8c.js"><link rel="prefetch" href="/assets/js/50.f2a42406.js"><link rel="prefetch" href="/assets/js/51.444cc3d8.js"><link rel="prefetch" href="/assets/js/52.cf2befd8.js"><link rel="prefetch" href="/assets/js/53.fbe609f8.js"><link rel="prefetch" href="/assets/js/54.a43fb514.js"><link rel="prefetch" href="/assets/js/55.d0c11641.js"><link rel="prefetch" href="/assets/js/56.c6f114d9.js"><link rel="prefetch" href="/assets/js/57.cc386420.js"><link rel="prefetch" href="/assets/js/58.e747d0f6.js"><link rel="prefetch" href="/assets/js/6.c1fd48f0.js"><link rel="prefetch" href="/assets/js/7.32b39b92.js"><link rel="prefetch" href="/assets/js/8.e2284671.js"><link rel="prefetch" href="/assets/js/9.8def3992.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a2e941e0.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">月藤的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://ziphold.gitee.io/blog/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  旧博客（停止更新）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://rattonlzh.github.io/homepage/homepage.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  常用网址导航（停止更新）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/知识点总结/jquery总结.html" class="nav-link">
  zh-CN
</a></li><li class="dropdown-item"><!----> <a href="/en/" class="nav-link">
  en-US
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="avatar"><img src="/assets/img/avatar.2b77755b.png" alt srcset></div> <div style="z-index: 999"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="298" height="52" src="//music.163.com/outchain/player?type=2&id=28283137&auto=1&height=32"></iframe></div> <nav class="nav-links"><div class="nav-item"><a href="https://ziphold.gitee.io/blog/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  旧博客（停止更新）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://rattonlzh.github.io/homepage/homepage.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  常用网址导航（停止更新）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/知识点总结/jquery总结.html" class="nav-link">
  zh-CN
</a></li><li class="dropdown-item"><!----> <a href="/en/" class="nav-link">
  en-US
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>随便说说</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>知识点总结</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/知识点总结/git总结.html" class="sidebar-link">git总结</a></li><li><a href="/知识点总结/java单元测试总结.html" class="sidebar-link">java测试</a></li><li><a href="/知识点总结/jquery总结.html" class="active sidebar-link">jquery初探</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/知识点总结/jquery总结.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/知识点总结/jquery总结.html#jquery必知必会" class="sidebar-link">jQuery必知必会</a></li></ul></li><li><a href="/知识点总结/js总结.html" class="sidebar-link">js易错点</a></li><li><a href="/知识点总结/kotlin语法总结.html" class="sidebar-link">kotlin语法入门</a></li><li><a href="/知识点总结/latex总结.html" class="sidebar-link">latex常用代码</a></li><li><a href="/知识点总结/PS总结.html" class="sidebar-link">PS总结</a></li><li><a href="/知识点总结/springboot总结.html" class="sidebar-link">springboot进行web开发总结</a></li><li><a href="/知识点总结/thinkphp总结.html" class="sidebar-link">thinkphp入坑</a></li><li><a href="/知识点总结/uml软件建模总结.html" class="sidebar-link">uml软件建模总结</a></li><li><a href="/知识点总结/人工智能总结.html" class="sidebar-link">人工智能总结</a></li><li><a href="/知识点总结/大数据软件工程总结.html" class="sidebar-link">大数据软件工程总结</a></li><li><a href="/知识点总结/常用快捷键总结.html" class="sidebar-link">第一篇博客</a></li><li><a href="/知识点总结/数字图像处理总结.html" class="sidebar-link">数字图像处理知识点</a></li><li><a href="/知识点总结/数据库应用理论总结.html" class="sidebar-link">数据库应用复习</a></li><li><a href="/知识点总结/数据库系统概念总结.html" class="sidebar-link">数据库系统概念总结</a></li><li><a href="/知识点总结/数据挖掘总结.html" class="sidebar-link">数据挖掘总结</a></li><li><a href="/知识点总结/设计模式总结.html" class="sidebar-link">设计模式</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>考研专区</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>读书笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开发资料</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>配置记录</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>思维导图</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/friend_link.html" class="sidebar-link">友情链接</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="jquery初探"><a href="#jquery初探" class="header-anchor">#</a> jquery初探</h1> <blockquote><p>[TOC]</p></blockquote> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>学习一个库最好的参考资料是官方文档，此文记录了个人认为在初学jQuery时首先应该了解的东西，本文内容较为基础且不全面，不能取代官方文档，想要了解jQeury的具体用法，请自行查阅相关文档，推荐以下自学网址：</p> <p><a href="https://api.jquery.com/" target="_blank" rel="noopener noreferrer">jQuery官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://www.jquery123.com/category/ajax/" target="_blank" rel="noopener noreferrer">jQeury123<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://www.w3cschool.cn/jqueryui/" target="_blank" rel="noopener noreferrer">jQuery UI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="jquery必知必会"><a href="#jquery必知必会" class="header-anchor">#</a> jQuery必知必会</h2> <ol><li>选择器</li> <li>ajax处理的常用api</li> <li>dom节点的增删查改</li> <li>修改css和属性的方法</li> <li>dom事件</li> <li>显示、隐藏元素</li></ol> <h3 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h3> <p><code>$('*')</code>：全范围选择器，选择所有元素</p> <p><code>$('element')</code>:元素选择器，选择标签名为element的元素</p> <p><code>$('.myclass')</code>:类选择器，选择 <code>class=&quot;myclass&quot;</code>的元素</p> <p><code>$('#myid')</code>:id选择器，选择 <code>id=&quot;myid&quot;</code>的元素</p> <p><code>$('div[data|=&quot;toggle&quot;]')</code>:属性选择器，选择data属性值为toggle或者为含toggle-前缀的字符串的div元素</p> <p><code>$('input[name=&quot;uid&quot;]')</code>:属性选择器，选择name=“uid”的input元素</p> <p><code>$('input[name*=&quot;uid&quot;]')</code>:属性选择器，选择name=包含子串“uid”的字符串的input元素</p> <p><code>$('input[name!=&quot;pid&quot;]')</code>:属性选择器，选择name不为pid的input元素</p> <p><code>$('input[name^=&quot;id&quot;')</code>:属性选择器，选择name=以id为开头的字符串的input元素</p> <p><code>$('input[name$=&quot;id&quot;]')</code>：属性选择器，选择name=以id为结尾的字符串的input元素</p> <p><code>$(':button')</code>:选择button元素或者type=“button”的input元素</p> <p><code>$(':checked')</code>:选择被选中（checked）的元素，可以是radio、checkbox或select中的option元素</p> <p><code>$('input:disabled')</code>:选择无法获取焦点（disable）的input元素</p> <p><code>$('input:enabled')</code>:选择不带有disable属性的input元素</p> <p><code>$('ol:even')</code>:选择下标为偶数的ol元素（下标从0开始）</p> <p><code>$('input:not(:visible)')</code>:选择display不为none的input属性</p> <p><code>$('li:parent')</code>:选择li的父节点</p> <p><code>$(':input')</code>:选择所有的input元素，button元素和textarea元素，select元素</p> <p>暂且介绍这么多，进入下一部分</p> <h3 id="ajax处理的常用api"><a href="#ajax处理的常用api" class="header-anchor">#</a> ajax处理的常用api</h3> <p><code>$( &quot;form&quot; ).serialize();</code>：将form序列化成 <code>param1=val1&amp;param2=val2&amp;...</code> 格式的查询字符串</p> <p><code>$( &quot;:input&quot; ).serializeArray()</code>：将input元素序列化成json数组，格式如下：</p> <div class="language-json extra-class"><pre class="language-json"><code>	
<span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;1&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;2&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;3&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;d&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;4&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;e&quot;</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">&quot;5&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre></div><p><code>$('.content').load(url, data, complete)</code>:从服务器 加载数据，将返回的内容内嵌到 <code>$('.content')</code>中，具体过程如下：</p> <p>发起ajax请求，将json类型的字符串或对象提交到url，完成请求后，将返回的内容填充到class=“content”的元素中,并执行回调函数complete，data和complete都是可选的,complete类型为 <code>Type: Function( String responseText, String textStatus, jqXHR jqXHR )</code>，textStatus可取“success”和“error”</p> <p><code>.get()</code>:获取数据，交由回调函数处理，如果没有回调函数，会忽略返回结果，代码如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&quot;ajax/test.html&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">&quot;.result&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> data <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token function">alert</span><span class="token punctuation">(</span> <span class="token string">&quot;Load was performed.&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>$.post( url, data, function( d ) {...}, &quot;json&quot;);</code>：通过post方法的ajax请求发送data数据到服务器的，返回的数据data被处理成json对象，通过回调函数处理</p> <p><code>.gettJSON</code>:获取数据 并解析位json对象，交由回调函数处理</p> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span> <span class="token string">&quot;ajax/test.json&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token keyword">var</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>  $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span> data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">key<span class="token punctuation">,</span> val</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>    items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span> <span class="token string">&quot;&lt;li id='&quot;</span> <span class="token operator">+</span> key <span class="token operator">+</span> <span class="token string">&quot;'&gt;&quot;</span> <span class="token operator">+</span> val <span class="token operator">+</span> <span class="token string">&quot;&lt;/li&gt;&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">&quot;&lt;ul/&gt;&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>    <span class="token string">&quot;class&quot;</span><span class="token operator">:</span> <span class="token string">&quot;my-new-list&quot;</span><span class="token punctuation">,</span>    html<span class="token operator">:</span> items<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span> <span class="token string">&quot;&quot;</span> <span class="token punctuation">)</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendTo</span><span class="token punctuation">(</span> <span class="token string">&quot;body&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>$.ajax(config)</code>:jquery处理ajax的底层api，传入json对象config，config可取值如下：</p> <div class="language- extra-class"><pre class="language-text"><code>{
  url: &quot;test.html&quot;,
  type:&quot;get&quot;,
  dataType:&quot;json&quot;,
  context: document.body,
  success:function(){xxx},
  error:function(){xxxx},
  data:{'name':&quot;val&quot;}
}
</code></pre></div><h3 id="dom节点的增删查改"><a href="#dom节点的增删查改" class="header-anchor">#</a> dom节点的增删查改</h3> <p><code>.wrap()</code>:在每个匹配元素的外部用一对标签包裹</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">&quot;p&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">wrap</span><span class="token punctuation">(</span> <span class="token string">&quot;&lt;div&gt;&lt;/div&gt;&quot;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>.wrapAll()</code>:在所有的匹配元素的外部用一对标签包裹</p> <p><code>.append()</code>:在匹配元素内部的末尾增加html内容</p> <p><code>.prepend()</code>:在匹配元素内部的开头增加html内容</p> <p><code>html()</code>:返回或设置匹配元素的html内容，不带参数是返回值，带参数，是将匹配元素的html内容设置为参数的值</p> <p><code>text()</code>:返回或设置匹配元素的文本内容（html标签会被转义），其余同上</p> <p><code>before()</code>:在每个匹配元素前面插入html内容</p> <p><code>after()</code>：在每个匹配元素后面插入html内容</p> <p><code>insertBefore</code></p> <h3 id="修改css和属性的方法"><a href="#修改css和属性的方法" class="header-anchor">#</a> 修改css和属性的方法</h3> <p>.css(style-name,style-val):设置样式</p> <p>.attr(name):获取第一个匹配元素的name的值</p> <p>.val():设置或返回value的值</p> <p>.addClass():增加class</p> <p>.removeClass():移除class</p> <p>.removeAttr(name):移除name属性</p> <h3 id="dom事件"><a href="#dom事件" class="header-anchor">#</a> dom事件</h3> <p>.blur:失去焦点的状态</p> <p>.change:内容发生改变</p> <p>.click：单击</p> <p>.contextMenu:打开右键菜单</p> <p>.dblclick:双击</p> <p>.focus:处于焦点时</p> <p>.focusin:获得焦点瞬间</p> <p>.focusout:失去焦点瞬间</p> <p>.hover:鼠标悬停的时候</p> <p>.keydown:按下一个键还未松开的时候</p> <p>.keypress:按下一个键时</p> <p>.keyup:松开一个键时</p> <p>.ready:文档树已经加载完毕</p> <p>.scroll:页面发生滚动时</p> <p>.submit:提交表单时</p> <p>.mouseup:鼠标松开</p> <p>.mousedown：鼠标按下</p> <p>.mouseover：鼠标在区域内</p> <p>.mouseout:鼠标在区域外</p> <p>.mouseleave:鼠标离开区域</p> <p>.mouseenter:鼠标进入区域</p> <p>以上时间都可以传入回调函数，当事件触发后执行</p> <p>此外，<code>.preventDefault()</code>可以阻止触发事件的默认行为</p> <h3 id="显示-隐藏元素"><a href="#显示-隐藏元素" class="header-anchor">#</a> 显示，隐藏元素</h3> <p>.show():显示</p> <p>.hide()：隐藏</p> <p>.toggle:切换显示/隐藏</p> <p>.slideUp()：上滑收起</p> <p>.slideDown()：下拉出现</p> <p>.slideToggle()：切换上滑/下拉</p> <p>.fadeIn()：淡入</p> <p>.fadeOut()：淡出</p> <p>.fadeToggle()：切换淡入/淡出</p></div> <footer class="page-edit"><!----> <!----> <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh"><img alt="知识共享许可协议" src="" style="border-width:0"></a><br>本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>进行许可。

   
</footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/知识点总结/java单元测试总结.html" class="prev">
        java测试
      </a></span> <span class="next"><a href="/知识点总结/js总结.html">
        js易错点
      </a>
      →
    </span></p></div>  <footer style="text-align:center;"><a href="https://beian.miit.gov.cn">
    粤ICP备2021020303号</a></footer></main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.54ea76a2.js" defer></script><script src="/assets/js/2.c554ece5.js" defer></script><script src="/assets/js/35.768c1bb2.js" defer></script>
  </body>
</html>
